<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--淘宝账号/抖音账号-->
    <view class="mx-5">
      <u--form :model="accountInfo" :rules="rules" ref="form" errorType="toast">
        <u-form-item
          class="text-base text-dark"
          labelWidth="140rpx"
          :label="accountInfo.mediaType == '1' ? '淘宝账号' : '抖音账号'"
          prop="mediaAccount"
        >
          <u--input
            v-model="accountInfo.mediaAccount"
            fontSize="32rpx"
            color="#333333"
            placeholderStyle="color: #999999"
            placeholder="请输入"
            :disabled="accountInfo.id != undefined && accountInfo.status == '2'"
            clearable
          >
          </u--input>
        </u-form-item>
        <view class="text-sm text-primary" v-if="accountInfo.status == '2'"
          >如需修改账号，请联系客服</view
        >
        <view class="flex items-center mb-2.5" v-if="accountInfo.status == '3'"
          ><u-icon name="/static/icons/icon-message-tip.png" size="24"></u-icon
          ><text class="text-xs text-light ml-1.5"
            >被驳回原因：{{ accountInfo.remark }}</text
          ></view
        >
        <u-form-item
          class="text-base text-dark"
          labelWidth="140rpx"
          label="账号截图"
        >
          <view class="flex justify-between w-full">
            <view
              @click="uploadPhoto('screenshotImg')"
              v-if="!accountInfo.accountImgUrl"
            >
              <image class="w-24 h-24" src="/static/icons/icon-photo-add.png" />
            </view>
            <view class="flex justify-center relative" v-else>
              <view
                class="text-center text-white text-sm w-24 h-8 leading-8 button-bg absolute bottom-0 z-10 rounded-b-xl"
                v-if="
                  (!accountInfo.id && accountInfo.accountImgUrl) ||
                  accountInfo.status == '3'
                "
                @click="uploadPhoto('screenshotImg')"
                >更换</view
              >
              <image
                class="w-24 h-24 rounded-xl"
                :src="accountInfo.accountImgUrl"
              />
            </view>
            <view @click="showGuide(1, mediaType)"
              ><u-icon
                name="question-circle"
                color="#CCCCCC"
                size="42rpx"
              ></u-icon
            ></view>
          </view>
        </u-form-item>
        <u-form-item
          class="text-base text-dark"
          labelWidth="140rpx"
          label="收货地址"
        >
          <view class="flex justify-between w-full">
            <view class="text-light text-sm"
              >需与{{
                accountInfo.mediaType == '1' ? '淘宝账号' : '抖音账号'
              }}保持一致</view
            >
            <view @click="showGuide(2, mediaType)"
              ><u-icon
                name="question-circle"
                color="#CCCCCC"
                size="42rpx"
              ></u-icon
            ></view>
          </view>
        </u-form-item>
        <u-form-item
          class="text-base text-dark"
          labelWidth="140rpx"
          label="收货人"
          prop="receiverName"
        >
          <u--input
            v-model="accountInfo.receiverName"
            fontSize="32rpx"
            color="#333333"
            placeholderStyle="color: #999999"
            placeholder="收货人"
            clearable
          >
          </u--input>
        </u-form-item>
        <u-form-item
          class="text-base text-dark"
          labelWidth="140rpx"
          label="手机号"
          prop="receiverName"
        >
          <u--input
            v-model="accountInfo.receiverPhone"
            fontSize="32rpx"
            color="#333333"
            placeholderStyle="color: #999999"
            placeholder="手机号"
            clearable
          >
          </u--input>
        </u-form-item>
        <u-form-item
          class="text-base text-dark"
          labelWidth="140rpx"
          label="所在地区"
          @click="showUniAddressSelector = true"
        >
          <view
            class="text-base w-full rounded leading-9"
            style="border: 1px solid #dddddd"
            ><text class="mx-2">{{ areaInfo }}</text></view
          >
        </u-form-item>
        <u-form-item
          class="text-base text-dark"
          labelWidth="140rpx"
          label="详细地址"
          prop="receiverAddress"
        >
          <u--input
            v-model="accountInfo.receiverAddress"
            fontSize="32rpx"
            color="#333333"
            placeholderStyle="color: #999999"
            placeholder="小区楼栋/门牌号"
            clearable
          >
          </u--input>
        </u-form-item>
      </u--form>
      <view
        class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow mt-8"
        style="background: #f7412d"
        @click="saveForm()"
        >保存</view
      >
    </view>
    <!--省市区地址选择-->
    <address-selector
      v-if="showUniAddressSelector"
      :areaInfoSelected="areaInfoObj"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    ></address-selector>
    <!--教程说明-->
    <u-popup
      :show="isShow"
      @close="isShow = false"
      mode="center"
      round="15"
      bgColor="#FFEAED"
    >
      <view class="w-72">
        <view
          class="text-center bg-pink text-white text-base rounded-t-md h-10 leading-10"
          >{{ guideTitle }}</view
        >
        <view class="rounded-b-md">
          <view class="mx-4">
            <view class="pt-5">
              <image class="w-full" mode="widthFix" :src="guideImage"></image
            ></view>
            <view class="mx-14 py-5"
              ><view
                class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-pink"
                @click="isShow = false"
                >知道了</view
              ></view
            >
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { postFile } from '../../../services/file';
import { shoppingAccountInfo, shoppingAccountBind } from '../../services/mine';

export default {
  data() {
    return {
      isShow: false,
      mediaType: 1,
      guideTitle: '默认标题',
      guideImage: '/static/images/taobaoAccount.png',
      accountInfo: {
        mediaType: '1',
        mediaAccount: '',
        accountImg: '',
        accountImgUrl: '',
        receiverProvince: '',
        receiverCity: '',
        receiverCounty: '',
        receiverTown: '',
        receiverAddress: '',
        receiverPhone: '',
        receiverName: '',
      },
      accountInfoBak: {},
      rules: {
        mediaAccount: {
          required: true,
          message: '请输入购物账号',
        },
      },
      showUniAddressSelector: false,
      areaInfo: '',
      areaInfoObj: {
        provinceObj: {
          id: '',
          name: '',
        },
        cityObj: {
          id: '',
          name: '',
        },
        areaObj: {
          id: '',
          name: '',
        },
        streetObj: {
          id: '',
          name: '',
        },
      },
    };
  },
  async created() {
    const { mediaType } = this.$Route.query;
    if (mediaType == 2) {
      uni.setNavigationBarTitle({
        title: '抖音账号',
      });
    }
    this.mediaType = mediaType;
    this.accountInfo.mediaType = mediaType;
    this.getShoppingAccountInfo(mediaType);
  },
  methods: {
    //取消省市区选择弹窗
    handleCancel() {
      this.showUniAddressSelector = false;
    },
    //确定选择省市区
    handleConfirm(areaInfoObj) {
      this.showUniAddressSelector = false;
      this.areaInfoObj = areaInfoObj;
      this.areaInfo =
        areaInfoObj.provinceObj.name +
        areaInfoObj.cityObj.name +
        areaInfoObj.areaObj.name +
        areaInfoObj.streetObj.name;
    },
    //显示引导教程
    showGuide(type, mediaType) {
      this.isShow = true;
      if (type == 1 && mediaType == 1) {
        this.guideTitle = '淘宝账号';
        this.guideImage = '/static/images/taobaoAccount.png';
      }
      if (type == 2 && mediaType == 1) {
        this.guideTitle = '如何查找淘宝收货地址';
        this.guideImage = '/static/images/taobaoAddress.png';
      }
      if (type == 1 && mediaType == 2) {
        this.guideTitle = '抖音号';
        this.guideImage = '/static/images/douyinAccount.png';
      }
      if (type == 2 && mediaType == 2) {
        this.guideTitle = '如何查找抖音收货地址';
        this.guideImage = '/static/images/douyinAddress.png';
      }
    },
    //获取绑定账号信息
    async getShoppingAccountInfo(mediaType) {
      const { code, data } = await shoppingAccountInfo({ mediaType });
      if (code != 200) return;
      if (data.id) {
        this.accountInfo = data;
        this.accountInfoBak = { ...data };
        if (data.receiverProvince) {
          this.areaInfoObj = {
            fullAreaTextInitial: ',,,',
            provinceObj: {
              id: data.receiverProvince,
              name: data.receiverProvinceName,
            },
            cityObj: {
              id: data.receiverCity,
              name: data.receiverCityName,
            },
            areaObj: {
              id: data.receiverCounty,
              name: data.receiverCountyName,
            },
            streetObj: {
              id: data.receiverTown,
              name: data.receiverTownName,
            },
          };
          this.areaInfo =
            data.receiverProvinceName +
            data.receiverCityName +
            data.receiverCountyName +
            data.receiverTownName;
        }
      }
    },
    //保存淘宝/抖音购物账号
    async saveForm() {
      if (
        this.accountInfo.mediaAccount == '' ||
        this.accountInfo.receiverAddress == '' ||
        this.accountInfo.receiverPhone == '' ||
        this.accountInfo.receiverName == '' ||
        this.accountInfo.accountImg == ''
      ) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none',
        });
        return;
      }
      if (!uni.$u.test.mobile(this.accountInfo.receiverPhone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none',
        });
        return;
      }
      //如果没有修改不要提交请求接口，否则会弹出不成功提示
      if (this.accountInfo.id != undefined) {
        if (
          this.accountInfoBak.receiverAddress ==
            this.accountInfo.receiverAddress &&
          this.accountInfoBak.receiverPhone == this.accountInfo.receiverPhone &&
          this.accountInfoBak.receiverName == this.accountInfo.receiverName &&
          this.accountInfoBak.receiverProvince ==
            this.areaInfoObj.provinceObj.id &&
          this.accountInfoBak.receiverCity == this.areaInfoObj.cityObj.id &&
          this.accountInfoBak.receiverCounty == this.areaInfoObj.areaObj.id &&
          this.accountInfoBak.receiverTown == this.areaInfoObj.streetObj.id &&
          this.accountInfoBak.mediaAccount == this.accountInfo.mediaAccount &&
          this.accountInfoBak.accountImg == this.accountInfo.accountImg
        ) {
          uni.showToast({
            title: '请修改后再提交',
            icon: 'none',
          });
          return;
        }
      }
      let params = {
        id: this.accountInfo.id ? this.accountInfo.id : '',
        accountImg: this.accountInfo.accountImg,
        mediaAccount: this.accountInfo.mediaAccount,
        mediaType: this.accountInfo.mediaType.toString(),
        status: this.accountInfo.id ? this.accountInfo.status : '',
        receiverProvince: this.areaInfoObj.provinceObj.id,
        receiverCity: this.areaInfoObj.cityObj.id,
        receiverCounty: this.areaInfoObj.areaObj.id,
        receiverTown: this.areaInfoObj.streetObj.id,
        receiverAddress: this.accountInfo.receiverAddress,
        receiverPhone: this.accountInfo.receiverPhone,
        receiverName: this.accountInfo.receiverName,
      };
      const { code, data } = await shoppingAccountBind(params);
      if (code != 200) return;
      uni.showToast({
        title: '保存成功',
        icon: 'none',
      });
      //原来保存成功是获取新的数据，现在改成保存成功返回上一页
      uni.navigateBack({
        delta: 1, // 返回的页面数，如果是1则返回上一页
      });
      //this.getShoppingAccountInfo(this.mediaType);
    },
    //上传账号截图
    uploadPhoto(type) {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: async ({ tempFiles, tempFilePaths }) => {
          // #ifdef H5
          const file = tempFiles[0];
          // #endif
          // #ifndef H5
          const file = tempFilePaths[0];
          // #endif
          const { code, data } = await postFile(file, 'other');
          if (code != 200) return;
          switch (type) {
            case 'screenshotImg':
              this.accountInfo.accountImgUrl = data.httpUrl;
              this.accountInfo.accountImg = data.path;
              break;
          }
        },
      });
    },
  },
};
</script>

<style></style>
